<template>
	<view class="appLogin">
		<uv-popup ref="popup" mode="bottom" @change="change">
			<view class="appLogin_box">
				<view class="appLogin_box_denglu">
					<!-- <uv-tabs :list="loginTabList" :line-color="'#FF6000'" :line-width="50" @click="click"></uv-tabs>
					<p>{{loginTabListIndex === 0?'如果未设置过密码，请点击忘记密码':'未注册手机号请先点击下方立即注册'}}</p> -->
					<h1>登录</h1>
					<view v-if="loginTabListIndex === 0" class="appLogin_box_denglu_password">
						<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
							<uv-form-item label="账号" prop="userInfo.mobile" borderBottom>
								<uv-input v-model="model1.userInfo.mobile" border="none">
								</uv-input>
							</uv-form-item>
							<uv-form-item label="密码" prop="userInfo.pwd" borderBottom>
								<uv-input v-model="model1.userInfo.pwd" :password='passwordISshow' border="none">
									<template v-slot:suffix>
										<uv-icon @click="passwordISshow= !passwordISshow"
											:name="passwordISshow?'eye-fill':'eye'"></uv-icon>
									</template>
								</uv-input>
							</uv-form-item>
							<uv-button color="#ff6000" text="登录" customStyle="margin-top: 10px"
								@click="submit"></uv-button>
						</uv-form>
					</view>
					<view v-else class="appLogin_box_denglu_code">
						<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form" labelWidth='50'>
							<uv-form-item label="账号" prop="userInfo.name" borderBottom>
								<uv-input v-model="model1.userInfo.name" border="none">
								</uv-input>
							</uv-form-item>
							<uv-form-item label="验证码" prop="userInfo.pwd" borderBottom>
								<uv-input v-model="model1.userInfo.pwd" :password='passwordISshow' border="none">


									<template v-slot:suffix>
										<uv-icon @click="passwordISshow= !passwordISshow"
											:name="passwordISshow?'eye-fill':'eye'"></uv-icon>
									</template>
								</uv-input>
							</uv-form-item>
							<uv-button color="#ff6000" text="登录" customStyle="margin-top: 10px"
								@click="submit"></uv-button>
						</uv-form>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		account_login
	} from '@/api/login.js'
	export default {
		name: "appLogin",
		data() {
			return {
				loginTabListIndex: 0,
				loginTabList: [{
						name: '账号登录'
					},
					{
						name: '短信登录'
					}
				],
				passwordISshow: true,
				rules: {
					'userInfo.mobile': {
						type: 'string',
						required: true,
						message: '请填写账号',
						// trigger: ['blur', 'change']
					},
					'userInfo.pwd': {
						type: 'string',
						required: true,
						message: '请填写密码',
						// trigger: ['blur', 'change']
					},
				},
				model1: {
					userInfo: {
						mobile: '',
						pwd: '',
					},
				},
				model2: {
					userInfo: {
						name: '',
						code: '',
					},
				},
			};
		},
		methods: {
			ShutDown(e) {
				this.$emit('ShutDown', e)
			},
			open() {
				this.$refs.popup.open();
			},
			change(e) {
				if (!e.show) {
					this.ShutDown(e)
				}
			},
			click(e) {
				this.loginTabListIndex = e.index;
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					this.account_loginFun();
				}).catch(errors => {
					this.showinteraction('有值未填写')
				})
			},
			async account_loginFun() {
				let data = await account_login(this.model1.userInfo);
				if (data.status === 1) {
					this.showinteraction('登录成功')
					uni.setStorageSync("openid", data.result.openid);
					this.$refs.popup.close();
				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},

		}
	}
</script>

<style lang="scss">
	.appLogin {
		.appLogin_box {
			width: 100%;
			min-height: 750rpx;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			overflow: hidden;
			background-color: #fff;
			padding: 50rpx 37rpx;

			.appLogin_box_denglu {
				width: 100%;
				height: 100%;

				p {
					font-size: 26rpx;
					color: #ccc;
					padding: 10rpx 22rpx;
				}

				.appLogin_box_denglu_password,
				.appLogin_box_denglu_code {
					padding: 22rpx;

					.appLogin_box_denglu_password_input {
						padding: 10rpx;
						display: flex;
						margin-bottom: 10rpx;
						justify-content: space-between;
						font-size: 30rpx;

						input {
							flex: 1;
							padding-left: 20rpx;
							font-size: 28rpx;
						}

					}





				}
			}
		}
	}
</style>